<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Polylive</title>
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}

BODY { font-family: Arial; font-size: small;
background-color: #CCCCFF;}

A:hover {color: red; text-decoration: underline; }


</style>
<script 

src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAYxpy0HiKBWXiyhVrpVqkshTWg_xmhpETXrjHUj59zHLsinrq_xSAm

AGIHF6kJpo3mJn5WnKDztG7kw"type="text/javascript">
</script>
</head>
<body onload="initialize()" onunload="GUnload()">

<div id="outline" style="position: absolute; top:60px;left:20px;width:512px; height:440px; 

-moz-outline-radius:20px; -moz-box-sizing:padding-box; -moz-outline-style:solid ;-moz-outline-color:#9FB6CD; 

-moz-outline-width:10px;visibility:transparent;">
</div>

<div id="map" style="position: absolute; top:60px;left:20px;width:512px; height:440px; "></div>


<script type="text/javascript">
//<![CDATA[

var map;
var icon;

_mSvgEnabled = true;
_mSvgForced  = true;

function initialize() {
	////map
	map = new GMap2(document.getElementById("map"));
	var start = new GLatLng(37.443109, -122.146189);
	map.setCenter(start, 16);
	map.addControl(new GMapTypeControl(1));
	map.addControl(new GLargeMapControl());
	map.addControl(new GScaleControl());// red marker icon

	icon = new GIcon();
	icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
	icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
	icon.iconSize = new GSize(12, 20);
	icon.shadowSize = new GSize(22, 20);
	icon.iconAnchor = new GPoint(6, 20);
	//icon.infoWindowAnchor = new GPoint(5, 1);

	//Add listener for clicking on the map
	GEvent.addListener(map,"click", function(overlay, point) {     
		//var myHtml = "The GPoint value is: " + map.fromLatLngToDivPixel(point) + " at zoom level " + map.getZoom();
		//map.openInfoWindow(point, myHtml);
		createMarker(point);
	});

}

function draw()
{
	poly.length=0; 
	for(var i=0;i<marker.length;i++)
	{
		if(line[i]){
			map.removeOverlay(line[i])
		};
		poly.push(marker[i].getPoint());
		line[i]=new GPolyline(poly,'#FF0000', 3, 1);
		map.addOverlay(line[i]);
}};

var newMarker = [];
var currPoint = 0;
var newLine =[];
var newPoly = [];

function createMarker(point) {
	newMarker[currPoint] = new GMarker(point, {icon:icon, draggable: true});
	map.addOverlay(newMarker[currPoint]);
	newMarker[currPoint].enableDragging();
	GEvent.addListener(newMarker[currPoint],'drag',function(){
		drawNew()
	});
	drawNew();
	currPoint++;
}

function drawNew()
{
	newPoly.length=0; 
	for(var i=0; i<newMarker.length; i++)
	{
		if(newLine[i]){
			map.removeOverlay(newLine[i])
		};
		newPoly.push(newMarker[i].getPoint());
		newLine[i]=new GPolyline(newPoly,'#FF0000', 3, 1);
		map.addOverlay(newLine[i]);
	}
};


//]]>
</script>


</body>
</html>
